<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 600px;height: 700px;margin-left: 2%;margin-right: 10%;" ref="chart">
      <button @click="tclick">画图</button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'DisplayDraw',
  data() {
    return {
      ans:{
        v_N:[[]],
        d_N_s:[[]],
        chart:[[]]
      }
    }
  },
  methods: {
    tclick(){
      this.init();
    },
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
              tooltip: {},
              backgroundColor: '#fff',
              visualMap: {
                show: false,
                dimension: 2,
                min: -1,
                max: 1,
                inRange: {
                  color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
              },
              xAxis3D: {
                type: 'value'
              },
              yAxis3D: {
                type: 'value'
              },
              zAxis3D: {
                type: 'value'
              },
              grid3D: {
                viewControl: {
                  // projection: 'orthographic'
                }
              },
              series: [{
                type: 'surface',
                wireframe: {
                  // show: false
                },
                equation: {
                  x: {
                    step: 0.05
                  },
                  y: {
                    step: 0.05
                  },
                  z: function (x, y) {
                    if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                      return '-';
                    }
                    return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
                  }
                }
              }]
            }
      // 4.传入数据
      this.chart.setOption(option);
    },
  },

}
</script>

<style>
</style>